<template>
	<div class="col-md-8 notes-bg">
		<div class="well fade in daytips">
			<span>{{query}}</span>
		</div>
		<article class="article well">
			<div class="note-body" v-for="(item,index) in list">
				<div class="note-title">{{getTitle(index)}}</div>
				<div class="note-item text-center" v-if="item.length" v-for="book in item" @click="routeTo(book)">
					<div class="note-content">
						<img :src="book.image">
					</div>
					<div class="note-header">{{book.title}}</div>
					<div class="note-footer" :style="{width:getWidth(book)}"></div>
					<div class="note-finish text-center" v-if="book.percent == book.num && book.type != 2">完</div>
				</div>
				<div class="text-center no-note" v-if="!item.length">
					Nothing in here
				</div>
			</div>
		</article>
	</div>
</template>
<script>
    import {mapGetters, mapMutations} from 'vuex'
    import {setTitle} from 'common/dom'

	export default {
		data() {
			return {
				query: '学习使人快乐...',
				url: 'notes',
				list: new Object()
			}
		},
		created() {
            setTitle(this.$title.note)
			this.__getData()
		},
		methods: {
			getWidth(item) {
				return item.percent / item.num * 100 + '%'
			},
			routeTo(item) {
				this.$router.push({
					name: 'record',
					params: {
						id: item.id
					}
				})
			},
			getTitle(index) {
				let name = ''
				switch(index) {
					case 'finish':
						name = '已读'
						break
					case 'want':
					 	name = '想读'
					 	break
					case 'reading':
						name = '在读'
						break
					default:
						name = '记录'
						break
				}
				return name
			},
			__getData() {
				this.$http.get('notes').then((response) => {
					this.list = response.data
					this.setDataReady(true)
				})
			},
			...mapMutations({
              setDataReady: 'SET_DATA_READY'
            })
		}
	}	
</script>

<style lang="scss" scope>
	.notes-bg {
		.daytips {
			padding: 15px;
	    	background-color: #fff;
	    }
	    .well {
	    	background-color: #fff;
			width: 100%;
			.note-body{
				width: 100%;
				margin-bottom: 20px;
				.note-title {
					line-height: 35px;
					width: 100%;
					color: #696969;
					border-bottom: 1px solid #f6f6f6;
					margin-bottom: 5px;
				}
				.note-item {
					position: relative;
					display: inline-block;
					width: 31.33333333%;
					padding: 20px 10px;
					border: 1px dashed #f6f6f6;
					margin: 8px 1%;
					cursor: pointer;
					img{
					    max-width: 100%;
				    	max-height: 100%;
					}
					>.note-header {
						margin-top: 10px;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					>.note-footer {
						position: absolute;
						left: 0;
						bottom: 0;
						height: 3px;
						background: #7FE22E;
					}
					>.note-finish {
						position: absolute;
						right: 0;
						bottom: 3px;
						font-size: 10px;
						line-height: 19px;
						width: 19px;
						height: 16px;
						background: #7FE22E;
						color: #fff;
						border-top-left-radius: 50%;
					}
				}
				.no-note {
					line-height: 45px;
					color: #c0c0c0;
				}
			}
	    }
	}
</style>